<template>
  <div class="add_2">
    <div class="form_box">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <Form-item label="规格" prop="size">
          <Radio-group v-model="formValidate.size">
            <Radio label="single">单规格</Radio>
            <Radio label="many">多规格</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="图片">
          <div style="display: flex; align-items: center">
            <div class="picListBox" v-if="formValidate.pic && formValidate.pic.length>0">
              <div class="picBox" v-for="(item,index) in formValidate.pic" :key="index">
                <img :src="item.src" alt="">
                <span class="iconfont icon-close-bold" @click="deletePic(item)"></span>
              </div>
            </div>
            <div class="uploadBox" @click="uploadSwitch(true)">
              <span class="iconfont icon-zhaoxiangji"></span>
            </div>
          </div>
          <p class="tip">建议尺寸：800*800，最多上传1张</p>
        </Form-item>
        <Form-item label="成本价">
          <Input-number v-model="formValidate.costPrice" :min="0" ></Input-number>
        </Form-item>
        <Form-item label="原价">
          <Input-number v-model="formValidate.originalPrice" :min="0" ></Input-number>
        </Form-item>
        <Form-item label="库存">
          <Input-number v-model="formValidate.repertory" :min="0" ></Input-number>
        </Form-item>
        <Form-item label="商品编码">
          <Input v-model="formValidate.encoding" ></Input>
        </Form-item>
        <Form-item label="重量(KG)">
          <Input-number v-model="formValidate.weight" :min="0" ></Input-number>
        </Form-item>
        <Form-item label="体积(m3)">
          <Input-number v-model="formValidate.volume" :min="0" ></Input-number>
        </Form-item>
      </Form>
    </div>
    <aside>
      <uploadPic :displaySwitch="upSwitch" v-if="upSwitch" @uploadSwitch="uploadSwitch" @checkedPic="checkedPic" />
    </aside>
  </div>
</template>

<script>
  export default {
    name: "add_2",
    data() {
      return {
        upSwitch: false,
        formValidate: {
          size: 'single',  // 规格
          pic: [],  // 图片
          costPrice: 0,  // 成本价
          originalPrice: 0,  // 原价
          repertory: 0,  // 库存
          encoding: null, // 商品编码
          weight: 0,  // 重量
          volume: 0,  // 体积
        },
        ruleValidate: {
          name: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请选择城市', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          interest: [
            { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
            { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
          ],
          date: [
            { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
          ],
          time: [
            { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请输入个人介绍', trigger: 'blur' },
            { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
          ]
        }
      }
    },
    created() {

    },
    methods: {
      // 开启/关闭弹框
      uploadSwitch(flag) {
        this.upSwitch = flag
      },
      // 删除图片
      deletePic(item) {
        let index = this.formValidate.pic.indexOf(item);
        if(index>=0) {
          this.formValidate.pic.splice(index,1)
        }
      },
      checkedPic(checkedList) {
        let length1 = this.formValidate.pic.length;
        let length2 = checkedList.length;
        if(length1 + length2 <= 1 ) {
          checkedList.forEach(item => {
            this.formValidate.pic.push(item)
          })
        }else{
          this.$Message.error('最多可上传1张图片！')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/uploadPic.scss";
  @import "../../../style/element.scss";
  .add_2 {
    .form_box{
      max-width: 600px;
    }
  }
</style>
<style lang="scss" scoped>
  .ivu-input-number,
  .ivu-input-wrapper{
    width: 400px;
  }

</style>
